<template>
  <div>
    <splitpanes class="default-theme" @resize="resize" @resized="resized">
      <pane min-size="25" size="40">
        <a-tabs v-model="tabKey" class="a-tabs-css" @change="tabChange">
          <a-tab-pane :key="1" tab="材料">
            <a-table
              class="review-table"
              :scroll="{ y: 800 }"
              :columns="columns"
              :data-source="materialList"
              rowKey="id"
              :pagination="false"
              :loading="loading"
            >
              <span slot="name" slot-scope="text, record, index">
                <span v-if="record.require == 3200" style="color: red">*</span> {{ index + 1 + '. ' + text }}
              </span>
              <span slot="fileList" slot-scope="list, record, rIndex">
                <div v-if="list && list.length">
                  <a
                    :id="item.id"
                    v-for="(item, index) in list"
                    :key="item.id"
                    class="file-css"
                    :class="{ 'a-checked': chekcedFileId == item.id }"
                    @click="selectFile(item, record, rIndex)"
                  >
                    <!-- <a-tag :color="item.isread == 3200 ? '#52c41a' : '#4682B4'">{{
                      item.isread == 3200 ? '已阅' : '未阅'
                    }}</a-tag> -->
                    <a-icon v-if="item.isread == 3200" type="folder-open" theme="filled" />
                    <a-icon v-else type="folder" theme="filled" />
                    {{ item.name }}</a
                  >
                </div>
                <div v-else class="empty-div" @click="selectEmpty(record, rIndex)">
                  未上传附件
                </div>
              </span>
            </a-table>
          </a-tab-pane>
          <a-tab-pane :key="2" tab="申请表" class="tab_pane" style="overflow: auto;">
            <TaskFormView :pattern="Number($route.params.pattern)" />
          </a-tab-pane>
          <a-button slot="tabBarExtraContent" @click="onClose">
            关闭
          </a-button>
        </a-tabs>
      </pane>
      <pane min-size="25">
        <div class="pane_right" style="padding-left:20px;overflow: auto;">
          <iframe id="iframe" v-show="fileUrl != ''" :src="fileUrl" width="100%" height="100%" scrolling="yes"  frameborder="0" ></iframe>
          <a-empty v-show="fileUrl == ''" description="暂无文件，无法预览" style="width:100%; height:650px" />
        </div>
      </pane>
    </splitpanes>
  </div>
</template>
 
<script>
import { reviewMixin } from './ReviewMixin.js'
import { queryMatterAttachList, saveMatterAttachReview } from '@/api/apply/apl_matter_attach'
import { kkfilePreview } from '@/utils/util'
export default {
  mixins: [reviewMixin],
  data() {
    return {
      columns: [
        {
          title: '材料名称',
          dataIndex: 'name',
          key: 'name',
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '附件信息',
          dataIndex: 'fileList',
          key: 'fileList',
          scopedSlots: { customRender: 'fileList' }
        }
      ],
      fileUrl: ''
    }
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      this.loading = true
      let res = await queryMatterAttachList({ applyid: this.applyid })
      if (res.data && res.data.length) {
        this.materialList = res.data
        if (this.selectData) {
          this.selectFile(
            this.materialList[this.selectData.materialIndex].fileList[this.selectData.fileIndex],
            this.materialList[this.selectData.materialIndex],
            this.selectData.materialIndex
          )
        } else {
          this.selectFile(this.materialList[0].fileList[0], this.materialList[0], 0)
        }
      }
      this.loading = false
    },
    // 选中附件
    async selectFile(file, record, index) {
      this.materialIndex = index
      this.chekcedFileId = file.id
      this.fileUrl = kkfilePreview(file.url);

    },
    async selectEmpty(record, index) {
      this.materialIndex = index
      this.chekcedFileId = null
    },
    onClose() {
      this.$emit('onClose')
    }
  }
}
</script>
 
<style src="@/style/css/materials.css" scoped></style>